<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户评价</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/style.css"/>
    <link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/media.css"/>
    <script type="text/javascript" src="__FONT__/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $(".pay_discount h1").click(function() {
            $(".pay_show").slideToggle();
        });
        $(".pay_show dd").click(function() {
            $(this).children('label').after('<i></i>');
            $(this).siblings().children('i').hide();
            $(".add_pay").html($(this).html());
            $(".pay_show").slideToggle('slow');
            // alert($(this).html())
        });
        
        $(".ol_a li").click(function() {
        	var index = $(this).index();
        	
            $(this).addClass('ol_li').siblings().removeClass('ol_li');
            $(this).children('a').addClass('fontSelectStart').parent()
            	.siblings()
            	.children('a')
            	.removeClass('fontSelectStart');
            
            var start = index + 1;
            var startElem = $(".ol_star span").eq(index);
            startElem.addClass('act').prevAll().addClass('act');
            startElem.nextAll().removeClass('act');
            
            $('#professional').val(start);
            $('#punctuality').val(start);
            $('#communication').val(start);
            
            $(".star_go li").each(function (i, o) {
            	var selectStart = $(o).find('span').eq(index);
            	selectStart.addClass('bct').prevAll().addClass('bct');
            	selectStart.nextAll().removeClass('bct');
            });
        });

        function updateTotalStart() {
        	 var professional = parseInt($('#professional').val());
        	 var punctuality = parseInt($('#punctuality').val());
        	 var communication = parseInt($('#communication').val());
             
             var start = Math.floor((professional + punctuality + communication)/3);
             
             if (start > 0) {
            	 var startElem = $(".ol_star span").eq(start - 1);
                 startElem.addClass('act').prevAll().addClass('act');
                 startElem.nextAll().removeClass('act');
                 
            	 var selectedElem = $('.ol_a').find('li').eq(start - 1);
               	 selectedElem.addClass('ol_li').siblings().removeClass('ol_li');
               	 selectedElem.children('a').addClass('fontSelectStart').parent()
                 	.siblings()
                 	.children('a')
                 	.removeClass('fontSelectStart');
             } else {
            	 var startElem = $(".ol_star span");
                 startElem.removeClass('act');
                 
            	 $('.ol_a.ol_li').find('.fontSelectStart').removeClass('fontSelectStart');
            	 $('.ol_a').removeClass('ol_li');
             }
        }
        
        $(".star_go li:eq(0) span").click(function() {
            $(this).addClass('bct').prevAll().addClass('bct');
            $(this).nextAll().removeClass('bct');
            
            start = $(this).index();
            $('#professional').val(start);
            updateTotalStart()
        });
        $(".star_go li:eq(1) span").click(function() {
            $(this).addClass('bct').prevAll().addClass('bct');
            $(this).nextAll().removeClass('bct');
            
            start = $(this).index();
            $('#punctuality').val(start);
            updateTotalStart()
        });
        $(".star_go li:eq(2) span").click(function() {
            $(this).addClass('bct').prevAll().addClass('bct');
            $(this).nextAll().removeClass('bct');
            
            start = $(this).index();
            $('#communication').val(start);
            updateTotalStart()
        });
    });
	</script>
	<style>
	.fontSelectStart{color: #f04877 !important;}
	</style>
</head>
<body style="background:#f7f7f9;">
	<include file="Public/customHeader" title="用户评价" url="javascript:history.go(-1);"/>
	<section class="beauty_sec beauty_pay">
      <div class="pay_main online">
        <h1>评价满[50字+2图]且内容优质，有机会赢100积分或优惠券，上不封顶。（评价需要1-2个审核日）</h1>
        <h2><strong>项目：</strong><span>{$item.service_name}</span></h2>
        <div class="pay_myself">
          <if condition="$beautician['profile_img']">
		       <img src="__UPLOADS__/Profile/{$beautician.profile_img}">
	       <else />
		       <img src="__FONT__/images/defaultProfile.png">
	       </if>
          <dd>
            <strong><span>美&nbsp;&nbsp;容&nbsp;&nbsp;师：</span><label>{$beautician.name}</label></strong>
            <strong><span>服务时间：</span><label>{$item.service_time}分钟</label></strong>
          </dd>
        </div>
      </div>
      <div class="ol_a">
         <ul class="clear">
            <li class="<eq name='comment.start' value='1'>ol_li</eq>"><a href="javascript:;" class="ol_a1 <eq name='comment.start' value='1'>fontSelectStart</eq>"><i></i><span>差</span></a></li>
            <li class="<eq name='comment.start' value='2'>ol_li</eq>"><a href="javascript:;" class="ol_a2 <eq name='comment.start' value='2'>fontSelectStart</eq>"><i></i><span>一般</span></a></li>
            <li class="<eq name='comment.start' value='3'>ol_li</eq>"><a href="javascript:;" class="ol_a3 <eq name='comment.start' value='3'>fontSelectStart</eq>"><i></i><span>满意</span></a></li>
            <li class="<eq name='comment.start' value='4'>ol_li</eq>"><a href="javascript:;" class="ol_a4 <eq name='comment.start' value='4'>fontSelectStart</eq>"><i></i><span>非常满意</span></a></li>
            <li class="<eq name='comment.start' value='5'>ol_li</eq>"><a href="javascript:;" class="ol_a5 <eq name='comment.start' value='5'>fontSelectStart</eq>"><i></i><span>满分</span></a></li>
         </ul>
      </div>
      <form action="{:U('Comments/comment')}" method="post">
      	<input type="hidden" name="post_id" value="{$item.id}">
      	<input type="hidden" name="uid" value="{$item.user_id}">
      	<input type="hidden" name="to_uid" value="{$item.beautician_id}">
      	<input type="hidden" name="url" value="">
	    <input type="hidden" name="professional" id="professional" value="0">
	    <input type="hidden" name="punctuality" id="punctuality" value="0">
	    <input type="hidden" name="communication" id="communication" value="0">
	    <input type="hidden" name="number" id="number" value="{$number}">
	    <input type="hidden" name="type" value="wx">
      <div class="ol_star">
         <span></span><span></span><span></span><span></span><span></span>
      </div>
      <div class="star_go">
         <ul class="clear">
         <li><label>专业</label><span></span><span></span><span></span><span></span><span></span></li>
         <li><label>服务</label><span></span><span></span><span></span><span></span><span></span></li>
         <li><label>手法</label><span></span><span></span><span></span><span></span><span></span></li>
         </ul>
      </div>
      <a class="pj_btn detail_btn">回复</a>
      <div class="mrs_three">
        <textarea name="content" maxlength="500" placeholder="服务效果如何，是否严格按流程，利益是否得体（评论至少3个字哦）" >{$comment.content}</textarea>
        <div class="pic_add">
             <ul>
                <li>
                	<div>
                		<img id="uploadCommentPhoto" src="__FONT__/images/pinjia_05.jpg" >
                	</div>
                </li>
             </ul>
        </div>
        <input type="submit" value="提交评论" class="pj_submit submitForm">
      </div>
      </form>
	</section>
	
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
	<include file="Public/share-js" />
	<script type="text/javascript">
	$(function () {
		$('.submitForm').click(function () {
			var professional = parseInt($("#professional").val()),
				punctuality = parseInt($("#punctuality").val()),
				communication = parseInt($("#communication").val()),
				content = $('[name="content"]').val();
			
			if (professional < 1 || punctuality < 1 || communication < 1) {
				alert('请对服务进行打分');
				return false;
			}
			
			if ($.trim(content) == '') {
				alert('填写品论内容');
				return false;
			}
			
			history.replaceState(1, "美容师评价列表",'{:U("Order/userOrder")}');
			$('form').submit();
		});
		
		$('input[name="url"]').val(window.location.href);
		var images = {
			localId: [],
			serverId: [],
			downloadId: []
		};
		 
		function deleteImage(elem) {
			var photoDom = $(elem).parents('li'),
				index = photoDom.index() - 1;
			
			images.localId.splice(index, 1);
			images.serverId.splice(index, 1);
			images.downloadId.splice(index, 1);
			
			photoDom.remove();
			return false;
		}
		
		function showImage(start) {
			$.each( images.downloadId, function(i, n){
				if (i >= start) {
					var html = '<li>'
							+'<a class="delete" href="javascript:;"></a>'
		 	          		+'<input type="hidden" name="comment_photo[]" value="'+images.serverId [i]+'">'
		 	          		+'<img src="'+n+'" />'
	 	          		+'</li>';
	 	          	var uploadElem = $(html);
	 				$('.pic_add li:last').after(uploadElem);
	 				$(uploadElem).find('.delete').click(function () {
	 					deleteImage(this);
	 	          	});
				}
        	});
		}
		
		function download(start) {
			var l = images.serverId.length;
			 $.each(images.serverId, function (i, n) {
				 if (i >= start) {
					 wx.downloadImage({
	                     serverId: n,
	                     isShowProgressTips: 1, // 默认为1，显示进度提示
	                     success: function (res) {
	                         images.downloadId.push(res.localId);
	                         if (i == (l - 1)) {
	                        	 showImage(start);
	                         }
	                     },
	                 });
				 }
             });
		}
		 
		$("#uploadCommentPhoto").click(function () {
			if (images.localId.length < 5) {
				var limit = 5 - images.localId.length;
				wx.chooseImage({
				    count: limit, // 默认9
				    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				    success: function (res) {
				    	var start = images.localId.length;
				    	
				    	if (!images.localId.length) {
				    		images.localId = res.localIds;
				    	} else {
				    		var l = images.localId.length;
				    		for (var i = 0; i < res.localIds.length; i++) {
				    			images.localId [l] = res.localIds [i];
				    			l++;
				    		}
				    	}
				        
				        var j = start;length = images.localId.length;
				        function upload() {
				          wx.uploadImage({
				            localId: images.localId[j],
				            success: function (res) {
				            	j++;
				              	images.serverId.push(res.serverId);
				              if (j < length) {
				                upload();
				              } else {
				            	  download(start);
				              }
				            },
				            fail: function (res) {
				              alert(JSON.stringify(res));
				            }
				          });
				        }
				        upload();
				    },
				    fail: function (res) {
				    	alert(JSON.stringify(res));
				    }
				});
			} else {
				alert('最多只能上传5张图片');
			}
		});
	});
	</script>
</body>
</html>